/*
 * Chatter
 *
 * Was historically based on http://www.petercooper.co.uk/archives/001038.html
 *
 */

Chatter = function() {};

Chatter.prototype = {

  // general state
  parent: null,
  username: "anon",
  uid: null,

  // ui elements
  ui_parent: null,
  ui_input: null,
  ui_list: null,
  ui_divname: 'chatter',
  ui_nick: null,

  // do layout in js for multiple instancing; creating or accepting a parent div
  layout: function(ui_parent) {
    var xscope = this;
    
    // build parent
    if(!ui_parent) { ui_parent = document.getElementById(this.ui_divname); }
    this.ui_parent = ui_parent;
    if(!this.ui_parent) {
      this.ui_parent = document.createElement("div");
      this.ui_parent.style.width = "400px";
      this.ui_parent.style.height = "400px";
    }
    
    // build input box
    this.ui_input = document.createElement("input");
    this.ui_input.type = 'text';
    this.ui_input.value="Type here and press enter when you're done...";
    this.ui_input.onclick = function() { xscope.ui_input.value = ''; };
    this.ui_input.onkeypress = function(e) {
      var c = 0;
      if(!e) var e = window.event;
      if(e.keyCode) c = e.keyCode;
      if(e.charCode) c = e.charCode;
      else if (e.which) c = e.which;
      if( c == 10 || c == 13) {
        xscope.submit();
      }
    }
			
    // build list and attach to parent
    this.ui_list = document.createElement("div");
    this.ui_parent.appendChild(this.ui_input);
    this.ui_parent.appendChild(this.ui_list);
			
    // styling main input area
    this.ui_input.setAttribute("class", "chatinput");
    if(true) {
      this.ui_input.style.width = "100%";
      this.ui_input.style.backgroundColor = "#c0e0f0";
      this.ui_input.style.overflow = "none";
      this.ui_input.style.margin = 0
      this.ui_input.style.padding = 0;
    }
							
   // styling list box
    this.ui_list.setAttribute("class", "xchatbox");
    if(true) {
      this.ui_list.style.width = "100%"
      this.ui_list.style.height = "400px"
      this.ui_list.style.textAlign = "left";
      //this.ui_list.style.overflow = "none";
      this.ui_list.style.margin = 0;
      this.ui_list.style.padding = 0;
    }

    // all done
    return this;
  },

  // Build list of content
  // xxx the list should strip off old content in a FIFO; it does not. [ and or clean db ]
  database_update: function(element) {

    // paranoia
    if(!element) { return; }
    if(!element || !element.id) { return; }
    if(!element.title || element.title.length < 1) return;

    // get nick of poster if any
    var nick = element.nick ? element.nick : 'nobody';
    nick = nick.replace(/\&/,'&amp;');
    nick = nick.replace(/\</,'&#60;');
    nick = nick.replace(/\>/,'&#62;');
    nick = nick.replace(/\"/,'&quot;');
    nick = nick.replace(/\'/,'&#39;');

    // get title
    var title = element.title;
    title = title.replace(/\&/,'&amp;');
    title = title.replace(/\</,'&#60;');
    title = title.replace(/\>/,'&#62;');
    title = title.replace(/\"/,'&quot;');
    title = title.replace(/\'/,'&#39;');

    // tag something event? xxx finish not yet written
    if(false && title.indexOf("/tag ") == 0) {
      title = title.substring(5);
    }

    // a nickname event? xxx improve { would have to be server side for uniqueness tests }
    else if(title.indexOf("/nick") == 0) {
      title = title.substring(6);
      var nick_new = title;
      new Insertion.Top(this.ui_list,"<font color='green'>" + nick + " is now known as " + nick_new + "</font><br/>");
      // xxx need to actually change your local nickname permanently if you
    }

    // insert text into the display
    else {
      new Insertion.Top(this.ui_list,'<font color="red">'+nick+'</font> '+title+'<br/>');
    }

    // all done
    return this;
  },

  // When user presses return in the input form this is fired off to server
  submit: function() {

    // fetch raw user input from shell
    var userinput = this.ui_input.value;

    // a nickname event? xxx improve { would have to be server side for uniqueness tests }
    if(userinput.indexOf("/nick") == 0) {
      this.ui_nick = userinput.substring(6);
    }

    // clear raw user input box and set focus there again
    this.ui_input.value='';
    this.ui_input.focus;

    // pass data to database storage
    // it will asynchronously - later on - call database_update() method as a callback on success
    DatabaseStore(this,this.uid+"/#",{title:userinput,handler:'chat',nick:this.ui_nick} );

    // all done
    return false;
  },

  // startup
  //
  //  parent = div node for putting chat into
  //  uid = a unique place to store each particular conversation; up to the server to implement
  //  username = your current nickname
  //
  startup: function(parent,uid,username) {

    // div to print into
    if(parent == null) {
      return;
    }

    // path to data
    if( !uid ) {
      uid = 'chat'
    }

    // guess at an initial nickname
    if( !username ) {
      username = 'anon';
    }

    // save state
    this.parent = parent;
    this.uid = uid;
    this.ui_nick = this.username = username;

    // perform an artistic layout procedurally
    this.layout(parent);

    // start synchronizing with the database - it calls local database_update() method eventually
    DatabaseSubscribe( this, this.uid );

    // all done setting up the chat area
    return this;
  }
}

// utility 
Chatter.make = function(parent,uid,username) {
  return ((new Chatter()).startup(parent,uid,username));
}
